<template>
  <div>
    <Row>
      <Col span="24">
        <Card class="margin-bottom-10">
          <Form inline>
            <FormItem class="margin-bottom-0">
              <Select v-model="searchConf.game_hash" filterable remote :remote-method="getGameName" style="width:260px"
                      placeholder='请选择游戏' :loading="nameLoading">
                <Option v-for="(option, index) in gameNameOption" :value="option.value" :key="index">{{ option.label }}</Option>
              </Select>
            </FormItem>
            <FormItem class="margin-bottom-0">
              <Button type="primary" @click="search">{{ $t('find_button') }}/{{ $t('refresh_button') }}</Button>
            </FormItem>
          </Form>
        </Card>
      </Col>
    </Row>
    <Row style="margin-top: 15px">
      <Col span="24">
        <Card>
          <div>
            <Table :loading="listLoading" :columns="columnsList" :data="tableData" border disabled-hover />
          </div>
          <div class="margin-top-15" style="text-align: center">
            <Page :total="tableShow.listCount" :current="tableShow.currentPage" :page-size="tableShow.pageSize"
                  @on-change="changePage" @on-page-size-change="changeSize" show-elevator show-sizer show-total />
          </div>
        </Card>
      </Col>
    </Row>
  </div>
</template>
<script>
import { getList, mute } from '@/api/game-chat'
import { getChoose } from '@/api/game-manager'
const deleteButton = (vm, h, currentRow, index) => {
  if (vm.buttonShow.del) {
    return h('Poptip', {
      props: {
        confirm: true,
        title: '您确定要禁言该玩家吗? ',
        transfer: true
      },
      on: {
        'on-ok': () => {
          let muteParams = {
            openid: currentRow.openid,
            game_hash: currentRow.game_hash,
            mute: currentRow.mute
          }
          mute(muteParams).then(response => {
            vm.$Message.success(response.data.msg)
            vm.getList()
          })
          currentRow.loading = false
        }
      }
    }, [
      h('Button', {
        style: {
          margin: '0 5px'
        },
        props: {
          type: 'error',
          placement: 'top',
          loading: currentRow.isDeleting
        }
      }, '禁言')
    ])
  }
}

export default {
  name: 'operate-order',
  data () {
    return {
      nameLoading: false,
      gameNameOption: [],
      gameShow: {},
      columnsList: [
        {
          title: '序号',
          type: 'index',
          width: 65,
          align: 'center'
        },
        {
          title: '昵称',
          align: 'center',
          key: 'nickname',
          tooltip: true,
          minWidth: 100
        },
        {
          title: 'openid',
          align: 'center',
          key: 'openid',
          tooltip: true,
          minWidth: 130
        },
        {
          title: '贵族等级',
          align: 'center',
          key: 'vip',
          tooltip: true,
          minWidth: 80
        },
        {
          title: '角色等级',
          align: 'center',
          key: 'level',
          tooltip: true,
          minWidth: 80
        },
        {
          title: '消息内容',
          align: 'center',
          key: 'message',
          tooltip: true,
          minWidth: 180
        },
        {
          title: '操作',
          align: 'center',
          width: 170,
          render: (h, params) => {
            if (params.row.openid !== 'ThisIsSystem' && params.row.openid !== 'ThisIsGameManager') {
              return h('div', [
                deleteButton(this, h, params.row, params.index)
              ])
            }
          }
        }
      ],
      tableData: [],
      tableShow: {
        currentPage: 1,
        pageSize: 10,
        listCount: 0
      },
      searchConf: {
        game_hash: ''
      },
      muteParams: {
        openid: '',
        game_hash: '',
        mute: ''
      },
      modalSetting: {
        show: false,
        loading: false,
        index: 0
      },
      buttonShow: {
        del: true
      },
      listLoading: false,
      total: {},
      userInfo: {}
    }
  },
  created () {
    let vm = this
    vm.getList()
    vm.getGameName()
    vm.hasRule('Chat/mute').then(res => {
      vm.buttonShow.del = res
    })
  },
  methods: {
    getGameName (value) {
      if (!this.gameNameOption.length) {
        getChoose({
          keyword: value
        }).then(response => {
          this.gameNameOption = response.data.data.list
          this.gameNameOption.forEach(i => {
            this.gameShow[i.value] = i.label
          })
        })
      }
    },
    setFormDate: function (time) {
      this.searchConf.date = time
    },
    changePage (page) {
      this.tableShow.currentPage = page
      this.getList()
    },
    changeSize (size) {
      this.tableShow.pageSize = size
      this.getList()
    },
    search () {
      this.tableShow.currentPage = 1
      this.getList()
    },
    getList () {
      let vm = this
      let params = {
        page: vm.tableShow.currentPage,
        size: vm.tableShow.pageSize,
        ...vm.searchConf
      }
      vm.listLoading = true
      getList(params).then(response => {
        vm.tableData = response.data.data.list
        vm.total = response.data.data.total
        if (response.data.data.userInfo) {
          vm.userInfo = response.data.data.userInfo
        }
        vm.tableShow.listCount = response.data.data.count
        vm.listLoading = false
      })
    }
  }
}
</script>
